<template>
    <div class="addMenus">
        <el-dialog
            title="提示"
            :visible.sync="centerDialogVisible"
            width="50%"
            center
            :before-close="handleClose"
        >
            <div class="content">
                <el-form
                    ref="formBox"
                    :model="form"
                    :rules="rules"
                    label-width="80px"
                >
                    <el-form-item label="角色名称" prop="roleName">
                        <el-input v-model="form.roleName"></el-input>
                    </el-form-item>
                    <el-form-item label="角色状态">
                        <el-switch v-model="form.isStatus"></el-switch>
                    </el-form-item>
                    <el-form-item label="角色权限">
                        <el-tree
                            :data="data"
                            ref="tree"
                            :default-checked-keys="form.menuIds"
                            show-checkbox
                            node-key="id"
                            :props="defaultProps"
                        >
                        </el-tree>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="sub(0)">取 消</el-button>
                <el-button type="primary" @click="sub(1)">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import { setRoles, updateRoles, getMenuList } from "../../api/sysApi";
export default {
    data() {
        return {
            centerDialogVisible: false,
            form: {
                roleName: "",
                isStatus: true,
                menuIds: [],
            },
            rules: {
                roleName: [
                    {
                        required: true,
                        message: "请填写角色名称",
                        trigger: "blur",
                    },
                ],
            },
            data: [],
            defaultProps: {
                children: "children",
                label: "label",
            },
        };
    },
    props: {
        isShow: {
            type: Boolean,
            default: false,
        },
        roleInfo: {
            type: Object,
            default: null,
        },
    },
    watch: {
        isShow(n, o) {
            this.centerDialogVisible = n;
        },
        roleInfo(n, o) {
            if (n == null) {
                this.form = {
                    roleName: "",
                    isStatus: true,
                    menuIds: [],
                };
            } else {
                console.log(n);
                n.isStatus = n.isStatus == "1" ? false : true;
                this.form = n;
            }
        },
    },
    created() {
        this.getMenuTree();
    },
    methods: {
        //提交关闭按钮
        sub(t) {
            if (t == 1) {
                this.$refs.formBox.validate((valid) => {
                    if (valid) {
                        //加载
                        const loading = this.$loading({
                            lock: true,
                            text: "Loading",
                            spinner: "el-icon-loading",
                            background: "rgba(0, 0, 0, 0.7)",
                        });
                        this.form.isStatus = this.form.isStatus ? "0" : "1";
                        this.form.menuIds = this.$refs.tree.getCheckedKeys();
                        if (
                            this.form.roleId == undefined ||
                            this.form.roleId == ""
                        ) {
                            //添加
                            setRoles(this.form).then((res) => {
                                console.log("add", res);
                                this.resetFun();
                                this.$emit("refreshBox");
                                loading.close();
                            });
                        } else {
                            //更新
                            updateRoles(this.form).then((res) => {
                                console.log("update", res);
                                this.resetFun();
                                this.$emit("refreshBox");
                                loading.close();
                            });
                        }
                    } else {
                        console.log("error submit!!");
                        return false;
                    }
                });
            } else {
                this.centerDialogVisible = false;
                this.$emit("show");
                console.log("no");
            }
        },
        handleClose(done) {
            this.centerDialogVisible = false;
            this.$emit("show");
        },
        //重置表单
        resetFun() {
            this.$refs.formBox.$el.reset();
            this.$refs.tree.setCheckedKeys([]);
            this.form.menuIds = [];
            this.form.isStatus = true;
            this.centerDialogVisible = false;
            this.$emit("show");
        },
        getMenuTree() {
            getMenuList().then((res) => {
                let data = [];
                res.data.list.forEach((i) => {
                    i.label = i.menuName;
                    i.children = res.data.list.filter(
                        (j) => j.parentMenuId == i.id
                    );
                    if (i.parentMenuId == undefined) {
                        data.push(i);
                    }
                });
                this.data = data;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.addMenus {
    .content {
        .el-form {
            .el-form-item:last-child {
                .el-tree {
                    max-height: 200px;
                    overflow: auto;
                    padding: 10px 0;
                }
            }
        }
    }
}
</style>
